<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #my-img-list li{
            min-height: 300px;
            background-color: blanchedalmond;
        }
    </style>
</head>
<body>
    <div style="height:800px">

        </div>
    <ul id="my-img-list">
        <li>
            <img data-src="./img/83801.jpg" alt="">
        </li>
        <li>
            <img data-src="./img/83802.jpg" alt="">
        </li>
        <li>
            <img data-src="./img/83803.jpg" alt="">
        </li>
    </ul>

    <script>
             /** 图片懒加载
        2.通过observer intersectionObserver方式
        好处：代码少，性能好
        坏处：兼容性
        **/
    </script>
 

    <script>
        document.onscroll
        //  使用observer
        const options={
            root:null,
            rootMargin:'100px',
            threshold:1
        }
        const observer=new IntersectionObserver(callback,options)
         function callback(entries){
            // const [{target,isIntersecting,rootBounds}]=entries;
            // console.log(entries,target,isIntersecting,rootBounds)
            entries.forEach(entry => {
                console.log(entry.boundingClientRect,entry.isIntersecting)
            })
         }
         let target = document.querySelector('img');
         observer.observe(target);
    </script>
</body>
</html>
